﻿@{
    Layout = null;
}
<script type="text/html" id="photos-template">
    <div data-bind="attr:{ 'id': 'photo-' + photo.Day  }">
        <div class="image-row text-center">
            <div class="image-row-inner" data-bind="event:{ mouseenter: showInfo, mouseleave: hideInfo }">
                <div class="relative">
                    <span class="photo-info" data-bind="text: 'День ' + photo.Day"></span>
                    <div class="views-photo white-color">
                        <span class="glyphicon glyphicon-eye-open"></span>
                        <span class="white-color" data-bind="text: photo.Views"></span>
                    </div>                    
                </div>
                <div>
                    <a data-bind="attr:{href:'/day/'+photo.Day}">
                        <img class="image" data-bind="attr:{'src': '/'+photo.Path, 'alt': photo.Name}" />
                    </a>
                </div>
                <!-- ko if: description() != "" && !$parent.enabledEdit() -->
                <div class="text-left photo-info-description">
                    <p data-bind="text: description()">
                    </p>
                </div>
                <!-- /ko -->
                <!-- ko if: music() != "" && !$parent.enabledEdit() -->
                <div class="text-left photo-info-description">
                    <p data-bind="html: musicLink">
                    </p>
                </div>
                <!-- /ko -->
                <!-- ko if: $parent.enabledEdit() -->
                <div class="text-left photo-info-description">
                    <textarea class="form-control" rows="6" data-bind="value: description, valueUpdate: 'afterkeydown'"></textarea>
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>
</script>
